<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<t:template>

<!-- 	<script language="javascript" type="text/javascript" src="site/js/jquery.min.js"></script> -->
	<script language="javascript" type="text/javascript" src="site/js/jquery.jqplot.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.pieRenderer.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.donutRenderer.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.json2.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.canvasTextRenderer.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.canvasAxisLabelRenderer.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.barRenderer.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.categoryAxisRenderer.min.js"></script>
	<script type="text/javascript" src="site/js/jqplot.pointLabels.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="site/css/jquery.jqplot.min.css" />
	
	<script>
	$(function() {
	jQuery.ajax({											
		url: 'estadisticas?action=barriosOrigen&sd='+$('#sd').val()+'&ed='+$('#ed').val(),
		dataType: 'json',
		success: function(data) {

					/* var data = [
					    ['Almagro', 12],['Villa Urquiza', 9], ['Palermo', 14], 
					    ['San Telmo', 16],['Retiro', 7], ['Liniers', 9]
					  ]; */
					  var plot1 = jQuery.jqplot ('chart1', [data], 
					    { 
					      seriesDefaults: {
					        // Make this a pie chart.
					        renderer: jQuery.jqplot.PieRenderer, 
					        rendererOptions: {
					          // Put data labels on the pie slices.
					          // By default, labels show the percentage of the slice.
					          showDataLabels: true
					        }
					      }, 
					      legend: { show:true, location: 'e' },
					      title: 'Barrios origen'
					    }
					  ) ;
				}										
	});
	
	jQuery.ajax({											
		url: 'estadisticas?action=barriosDestino&sd='+$('#sd').val()+'&ed='+$('#ed').val(),
		dataType: 'json',
		success: function(data) {

					/* var data = [
					    ['Almagro', 12],['Villa Urquiza', 9], ['Palermo', 14], 
					    ['San Telmo', 16],['Retiro', 7], ['Liniers', 9]
					  ]; */
					  var plot1 = jQuery.jqplot ('chart4', [data], 
					    { 
					      seriesDefaults: {
					        // Make this a pie chart.
					        renderer: jQuery.jqplot.PieRenderer, 
					        rendererOptions: {
					          // Put data labels on the pie slices.
					          // By default, labels show the percentage of the slice.
					          showDataLabels: true
					        }
					      }, 
					      legend: { show:true, location: 'e' },
					      title: 'Barrios destino'
					    }
					  ) ;
				}										
	});
	
	jQuery.ajax({											
		url: 'estadisticas?action=viajesPorMes',
		dataType: 'json',
		success: function(data) {

				var plot2 = $.jqplot ('chart3', [data], {
			      // Give the plot a title.
			      title: 'Viajes efectuados por mes',
			      // You can specify options for all axes on the plot at once with
			      // the axesDefaults object.  Here, we're using a canvas renderer
			      // to draw the axis label which allows rotated text.
			      axesDefaults: {
			        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
			      },
			      // An axes object holds options for all axes.
			      // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
			      // Up to 9 y axes are supported.
			      axes: {
			        // options for each axis are specified in seperate option objects.
			        xaxis: {
			          label: "Mes",
			          // Turn off "padding".  This will allow data point to lie on the
			          // edges of the grid.  Default padding is 1.2 and will keep all
			          // points inside the bounds of the grid.
			          pad: 0
			        }
			      }
			    });
			}										
	});
	
		jQuery.ajax({											
			url: 'estadisticas?action=viajesPorChofer&sd='+$('#sd').val()+'&ed='+$('#ed').val(),
			dataType: 'json',
			success: function(data) {
	
	// 				var s1 = [200, 600, 700, 1000];
				    // Can specify a custom tick Array.
				    // Ticks should match up one for each y value (category) in the series.
	// 			    var ticks = ['May', 'June', 'July', 'August'];
				    
				    var s1 = data.s1;
				    var ticks = data.ticks;
				     
				    var plot1 = $.jqplot('chart2', [s1], {
				        // The "seriesDefaults" option is an options object that will
				        // be applied to all series in the chart.
				        seriesDefaults:{
				            renderer:$.jqplot.BarRenderer,
				            rendererOptions: {fillToZero: true}
				        },
				        title: 'Viajes realizados por chofer',
				        // Custom labels for the series are specified with the "label"
				        // option on the series option.  Here a series option object
				        // is specified for each series.
				        series:[
				            {label:'Viajes'}
				        ],
				        // Show the legend and put it outside the grid, but inside the
				        // plot container, shrinking the grid to accomodate the legend.
				        // A value of "outside" would not shrink the grid and allow
				        // the legend to overflow the container.
				        legend: {
				            show: true,
				            placement: 'outsideGrid'
				        },
				        axes: {
				            // Use a category axis on the x axis and use our custom ticks.
				            xaxis: {
				                renderer: $.jqplot.CategoryAxisRenderer,
				                ticks: ticks
				            },
				            // Pad the y axis just a little so bars can get close to, but
				            // not touch, the grid boundaries.  1.2 is the default padding.
				            yaxis: {
				                pad: 1.05,
				                tickOptions: {formatString: '%d'}
				            }
				        }
				    });
				}										
		});
	});
	
	</script>
	
	
	
	<div class="container_14" style="margin-left: 30px;">
	
			<div class="grid_7 alpha box" style="height:310px;">
				<div id="chart1" style="height:300px;width:450px; "></div>
				
			</div>
			
			<div class="grid_7 omega box" style="height:310px;">
				<div id="chart4" style="height:300px;width:450px; "></div>	
			</div>
			
			<div class="grid_7 alpha box" style="height:310px;">
				<div id="chart2" style="height:300px;width:450px; "></div>
			</div>
			
			<div class="grid_7 omega box" style="height:310px;">
<!-- 				<div id="chart3" style="height:300px;width:510px; "></div> -->
			</div>
			
			<input type="hidden" name="sd" id="sd" value="${sd}"/>
			<input type="hidden" name="ed" id="ed" value="${ed}"/>
		</div>
	
</t:template>